<template>
  <div>
    <a-button @click="openAdd">添加</a-button>
    <a-table
      :columns="columns"
      :rowKey="`roleId`"
      :data-source="rolePage.records"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'roleId'">
          <a-button type="primary" @click="openEdit(record)">修改</a-button>
          <a-popconfirm
            @confirm="sureDeleted(record.menuId)"
            title="是否要删除该节点"
          >
            <a-button type="primary" danger> 删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <a-modal
      v-model:visible="editVisible"
      title="修改"
      :footer="null"
      :maskClosable="false"
      :afterClose="resetForm"
    >
      <a-form
        ref="editFormRef"
        :model="roleForm"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="角色名称"
          name="roleName"
          :rules="[{ required: true, message: '角色名称不能为空' }]"
        >
          <a-input v-model:value="roleForm.roleName" />
        </a-form-item>

        <a-form-item label="该角色拥有的权限" name="menus">
          <a-tree-select
            tree-checkable
            v-model:value="roleForm.menus"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            :fieldNames="{
              children: 'children',
              key: 'menuId',
              label: 'name',
              value: 'menuId',
            }"
            allow-clear
            :tree-data="menuList"
          />
        </a-form-item>

        <a-form-item label="备注" name="remark">
          <a-input v-model:value="roleForm.remark" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="edit" html-type="submit"
            >确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="addVisible"
      title="新增"
      :footer="null"
      :maskClosable="false"
      :afterClose="resetForm"
    >
      <a-form
        ref="addFormRef"
        :model="roleForm"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="角色名称"
          name="roleName"
          :rules="[{ required: true, message: '角色名称不能为空' }]"
        >
          <a-input v-model:value="roleForm.roleName" />
        </a-form-item>

        <a-form-item label="该角色拥有的权限" name="menus">
          <a-tree-select
            tree-checkable
            v-model:value="roleForm.menus"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            :fieldNames="{
              children: 'children',
              key: 'menuId',
              label: 'name',
              value: 'menuId',
            }"
            allow-clear
            :tree-data="menuList"
          />
        </a-form-item>

        <a-form-item label="备注" name="remark">
          <a-input v-model:value="roleForm.remark" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="add" html-type="submit"
            >确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import type { MenuVo, RoleDto, RoleVo } from "@/api";
import { Client } from "@/api/clientApi";
import { message, TreeSelect } from "ant-design-vue";
import "ant-design-vue/es/message/style/css";
import { onMounted, reactive, ref } from "vue";

// 只显示上一层
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const columns = [
  {
    title: "角色id",
    dataIndex: "roleId",
  },
  {
    title: "角色名称",
    dataIndex: "roleName",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
  {
    title: "操作",
    key: "roleId",
  },
];

const parentIds = ref<number[]>([]);
const roleForm = reactive<RoleDto>({
  roleId: 0,
  roleName: "",
  remark: "",
  menus: [],
});
const editFormRef = ref();
const addFormRef = ref();
/**
 * 修改弹窗的显示变量
 */
const editVisible = ref<boolean>(false);
/**
 * 打开修改弹窗
 * @param record
 */
const openEdit = async (record: RoleVo) => {
  editVisible.value = true;
  const rest = await Client.systemRole.getSysRole(record.roleId);
  roleForm.roleId = rest.roleId;
  roleForm.remark = rest.remark;
  roleForm.roleName = rest.roleName;
  roleForm.menus = rest.permissions.map((e) => e.menuId);
};
/**
 * 提交更新
 */
const edit = () => {
  Client.systemRole.putSysRole(roleForm).then(() => {
    editVisible.value = false;
    getRoleList();
    message.success("修改成功");
  });
};

const addVisible = ref<boolean>(false);
const openAdd = () => {
  addVisible.value = true;
};
const add = () => {
  Client.systemRole.postSysRole(roleForm).then(() => {
    addVisible.value = false;
    getRoleList();
    message.success("添加成功");
  });
};

const sureDeleted = (id: number) => {
  Client.systemRole.deleteSysRole(id).then(() => {
    message.success("删除成功");
    getRoleList();
  });
};

type RolePage = {
  records: RoleVo[];
  size: number;
  current: number;
};
const rolePage = reactive<RolePage>({
  records: [],
  size: 10,
  current: 1,
});

/**
 * 用户分页查询
 */
const getRoleList = async () => {
  const { records, size, current } = await Client.systemRole.getSysRolePage(
    rolePage.current,
    rolePage.size
  );
  rolePage.records = records;
  rolePage.size = size;
  rolePage.current = current;
};

let menuList = ref<MenuVo[]>([]);
const getMenuTree = async () => {
  menuList.value = await Client.systemMenu.getSysMenuMenuTree();
};

/**
 * 重置表单对象
 */
const resetForm = () => {
  roleForm.roleId = 0;
  roleForm.roleName = "";
  roleForm.menus = [];
  roleForm.remark = "";
};
onMounted(() => {
  getRoleList();
  getMenuTree();
});
</script>

<style scoped></style>
